<template>
	<view class="view-record-page">
		<!-- 空状态 -->
		<view v-if="viewRecords.length === 0" class="empty-state">
			<text class="empty-icon">🕵️‍</text>
			<text class="empty-text">暂无看房记录</text>
			<text class="empty-tip">快去看看你喜欢的房源吧～</text>
		</view>

		<!-- 看房记录列表 -->
		<view v-else class="record-list">
			<view class="record-item" v-for="(house, index) in viewRecords" :key="index" @click="goToDetail(house)">
				<view class="item-left">
					<image :src="house.image" class="house-image" mode="aspectFill"></image>
				</view>
				<view class="item-right">
					<view class="house-title">{{ house.title }}</view>
					<view class="house-desc">
						{{ house.roomType }}/{{ house.size }}平/{{ house.oriented }}/{{ house.community }}
					</view>
					<view class="house-footer">
						<view class="house-price">
							<text class="price-num">{{ house.price }}</text>
							<text class="price-unit">元/月</text>
						</view>
						<view class="view-time">{{ formatTime(house.viewTime) }}</view>
					</view>
				</view>
				<view class="delete-btn" @click.stop="removeRecord(house, index)">
					<text>✕</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewRecords: [],
				loading: false // 加载状态
			}
		},
		onShow() {
			// 每次显示页面时重新加载看房记录
			this.loadViewRecords();
		},
		methods: {
			// 加载看房记录
			loadViewRecords() {
				this.loading = true;
				try {
					// 获取存储的token
					const token = uni.getStorageSync('token');

					// 如果没有token，提示用户登录
					if (!token) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						this.loading = false;
						return;
					}
					const records = uni.getStorageSync('viewRecords') || [];
					this.viewRecords = records;
				} catch (e) {
					console.error('加载看房记录失败:', e);
					this.viewRecords = [];
				}
			},

			// 格式化时间
			formatTime(timestamp) {
				const now = Date.now();
				const diff = now - timestamp;

				const minute = 60 * 1000;
				const hour = 60 * minute;
				const day = 24 * hour;

				if (diff < minute) {
					return '刚刚';
				} else if (diff < hour) {
					return `${Math.floor(diff / minute)}分钟前`;
				} else if (diff < day) {
					return `${Math.floor(diff / hour)}小时前`;
				} else if (diff < 7 * day) {
					return `${Math.floor(diff / day)}天前`;
				} else {
					const date = new Date(timestamp);
					return `${date.getMonth() + 1}-${date.getDate()}`;
				}
			},

			// 删除记录
			removeRecord(house, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条看房记录吗？',
					success: (res) => {
						if (res.confirm) {
							try {
								let records = uni.getStorageSync('viewRecords') || [];
								records = records.filter(item => item.houseCode !== house.houseCode);
								uni.setStorageSync('viewRecords', records);

								// 更新列表
								this.viewRecords.splice(index, 1);

								uni.showToast({
									title: '已删除',
									icon: 'success'
								});
							} catch (e) {
								console.error('删除记录失败:', e);
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			// 跳转到详情页
			goToDetail(house) {
				uni.navigateTo({
					url: `/pages/houseDetail/index?houseCode=${house.houseCode}`
				});
			}
		}
	}
</script>

<style scoped>
	.view-record-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.empty-tip {
		font-size: 26rpx;
		color: #ccc;
	}

	/* 看房记录列表 */
	.record-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.record-item {
		position: relative;
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.item-left {
		width: 240rpx;
		height: 180rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.house-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.item-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-right: 60rpx;
	}

	.house-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}

	.house-desc {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.house-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.house-price {
		display: flex;
		align-items: baseline;
	}

	.price-num {
		font-size: 40rpx;
		color: #FF5252;
		font-weight: 900;
	}

	.price-unit {
		font-size: 24rpx;
		color: #FF5252;
		margin-left: 4rpx;
	}

	.view-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 删除按钮 */
	.delete-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>